<template>
   <a-card title="平台商家信息配置">
    <a-tabs v-model="key" @change="handleChangeTabs">
      <a-tab-pane tab="提现参数管理" key="1" :forceRender="true"> </a-tab-pane>
      <a-tab-pane tab="返佣配置" key="2" :forceRender="true"> </a-tab-pane>
      <a-tab-pane tab="协议管理" key="3" :forceRender="true"> </a-tab-pane>
      <a-tab-pane tab="平台客服配置" key="4" :forceRender="true"> </a-tab-pane>
      <a-tab-pane tab="启动广告配置" key="5" :forceRender="true"> </a-tab-pane>
      <a-tab-pane tab="首页图标配置" key="6" :forceRender="true"> </a-tab-pane>
      <a-tab-pane tab="其他配置" key="7" :forceRender="true"> </a-tab-pane>
    </a-tabs>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
              <a-col :span="24" v-if="key == '1'">
                <a-form-model-item label="提现手续费率" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="premiumRate">
                  <a-input-number v-model="model.premiumRate" placeholder="请输入提现手续费率" min="0" style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24"  v-if="key == '1'">
                <a-form-model-item label="最低提现金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="minMoney">
                  <a-input-number v-model="model.minMoney" placeholder="请输入最低提现金额" min="0" style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24"  v-if="key == '2'">
                <a-form-model-item label="佣金比例" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="commissionRate">
                  <a-input-number v-model="model.commissionRate" placeholder="请输入佣金比例" min="0" style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24"  v-if="key == '3'">
                <a-form-model-item label="用户协议" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userAgreement">
                  <j-editor v-model="model.userAgreement" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '3'">
                <a-form-model-item label="隐私协议" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="privacyAgreement">
                  <j-editor v-model="model.privacyAgreement" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '3'">
                <a-form-model-item label="其他协议" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="otherAgreement">
                  <j-editor v-model="model.otherAgreement" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24"  v-if="key == '4'">
                <a-form-model-item label="商务联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="businessMobile">
                  <a-input v-model="model.businessMobile" placeholder="请输入商务联系电话"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '4'">
                <a-form-model-item label="客服电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerMobile">
                  <a-input v-model="model.customerMobile" placeholder="请输入客服电话"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '4'">
                <a-form-model-item label="平台地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="platformAddress">
                  <a-input v-model="model.platformAddress" placeholder="请输入平台地址"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '4'">
                <a-form-model-item label="在线客服_企业微信链接" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="onlineCustomer">
                  <a-input v-model="model.onlineCustomer" placeholder="请输入在线客服_企业微信链接"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '5'">
                <a-form-model-item label="启动广告配置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="initType">
                  <j-dict-select-tag type="radio" v-model="model.initType" dictCode="init_type" placeholder="请选择启动广告配置(视频、图片、无)" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '5' && model.initType=='1'">
                <a-form-model-item label="视频" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="initUrl">
                  <j-upload v-model="model.initUrl"   ></j-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '5'  && model.initType=='2'">
                <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="initUrl">
                  <j-image-upload  v-model="model.initUrl" ></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '6'">
                <a-form-model-item label="我要买车图标配置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="homeIcon1">
                  <j-image-upload  v-model="model.homeIcon1" ></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '6'">
                <a-form-model-item label="我要卖车图标配置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="homeIcon2">
                  <j-image-upload  v-model="model.homeIcon2" ></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '6'">
                <a-form-model-item label="配件中心图标" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="homeIcon3">
                  <j-image-upload  v-model="model.homeIcon3" ></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '6'">
                <a-form-model-item label="农联未来图标" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="homeIcon4">
                  <j-image-upload  v-model="model.homeIcon4" ></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '6'">
                <a-form-model-item label="慧凯商城图标" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="homeIcon5">
                  <j-image-upload  v-model="model.homeIcon5" ></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '7'">
                <a-form-model-item label="农机信息模块电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="newMobile">
                  <a-input v-model="model.newMobile" placeholder="请输入农机信息模块电话"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '7'">
                <a-form-model-item label="用户默认头像" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="defaultAvatar">
                  <j-image-upload  v-model="model.defaultAvatar" ></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="key == '7'">
                <a-form-model-item label="我要买车弹窗内容配置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="modelContent">
                  <j-editor v-model="model.modelContent" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24"  :push="4">
                <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-button type="primary" @click="handleOk">提交</a-button>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </a-spin>
   </a-card>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  export default {
    name: 'YlPlatformConfigModal',
    components: {},
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        title:'',
        width:800,
        visible: false,
        disableSubmit: false,
        model:{
          initType:1,
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           premiumRate: [
              { required: true, message: '请输入提现手续费率!'},
           ],
           minMoney: [
              { required: true, message: '请输入最低提现金额!'},
           ],
           commissionRate: [
              { required: true, message: '请输入佣金比例!'},
           ],
           userAgreement: [
              { required: true, message: '请输入用户协议!'},
           ],
           privacyAgreement: [
              { required: true, message: '请输入隐私协议!'},
           ],
           otherAgreement: [
              { required: true, message: '请输入其他协议!'},
           ],
           businessMobile: [
              { required: true, message: '请输入商务联系电话!'},
           ],
           customerMobile: [
              { required: true, message: '请输入客服电话!'},
           ],
           platformAddress: [
              { required: true, message: '请输入平台地址!'},
           ],
           onlineCustomer: [
              { required: true, message: '请输入在线客服_企业微信链接!'},
           ],
           initType: [
              { required: true, message: '请输入启动广告配置(视频、图片、无)!'},
           ],
           initUrl: [
              { required: true, message: '请输入视频或者图片URL!'},
           ],
           homeIcon1: [
              { required: true, message: '请输入我要买车图标配置!'},
           ],
           homeIcon2: [
              { required: true, message: '请输入我要卖车图标配置!'},
           ],
           homeIcon3: [
              { required: true, message: '请输入配件中心图标!'},
           ],
           homeIcon4: [
              { required: true, message: '请输入农联未来图标!'},
           ],
           homeIcon5: [
              { required: true, message: '请输入慧凯商城图标!'},
           ],
           newMobile: [
              { required: true, message: '请输入农机信息模块电话!'},
           ],
           defaultAvatar: [
              { required: true, message: '请输入用户默认头像!'},
           ],
           modelContent: [
              { required: true, message: '请输入我要买车弹窗内容配置!'},
           ],
        },
        url: {
          add: "/config/ylPlatformConfig/add",
          edit: "/config/ylPlatformConfig/edit",
          queryById: "/config/ylPlatformConfig/queryById"
        },
        key:"1",
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.getConfig();
    },
    methods: {
       getConfig(){
        getAction(this.url.queryById, {id:''}).then((res)=>{
          if (res.success) {
            this.model = res.result;
          }
        })
      },
      handleChangeTabs(key) {
        this.key = key;
      },
     
      handleOk () {
        this.submitForm();
      },
      submitForm () {
          const that = this;
          // 触发表单验证
          this.$refs.form.validate(valid => {
            if (valid) {
              that.confirmLoading = true;
              let httpurl = '';
              let method = '';
              if(!this.model.id){
                httpurl+=this.url.add;
                method = 'post';
              }else{
                httpurl+=this.url.edit;
                 method = 'put';
              }
              httpAction(httpurl,this.model,method).then((res)=>{
                if(res.success){
                  that.$message.success(res.message);
                  that.submitCallback();
                }else{
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.confirmLoading = false;
              })
            }

          })
      },

    }
  }
</script>
